<script setup>
import { ref } from 'vue';

const attr = ref({
  id: 'id1',
  class: 'black'
});

const attr2 = ref('局部属性覆盖全局属性');

const a_param = ref('href');
const a_value = ref('https://www.baidu.com/');
const event1 = ref('click');
const event2 = ref(null);

function div_click() {
  console.log('点击了某个div');
}
</script>

<template>
  <div class="main">
    <h1>模板语法</h1>
    <ol>
      <li>
        <div class="title">Attribute 绑定</div>
        <div class="desc">
          属性绑定的值是 null 或者 undefined 时，那么该 attribute 将会从渲染的元素上移除
        </div>
        <div class="simple">
          <div :title="null">没有title属性</div>
          <div :title="undefined">没有title属性</div>
        </div>
      </li>
      <li>
        <div class="title">布尔型 Attribute</div>
        <div class="desc">
          为真值或一个空字符串时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute
          将被忽略（和 html 习惯一样）
        </div>
        <div class="simple">
          <button :disabled="''">按钮</button>
        </div>
      </li>
      <li>
        <div class="title">绑定多个属性</div>
        <div class="simple">
          <div v-bind="attr">这有一个元素</div>
        </div>
      </li>
      <li>
        <div class="title">全局属性</div>
        <div class="simple">
          <div>{{ attr1 }}</div>
          <div>{{ attr2 }}</div>
          <div>{{ fun1() }}</div>
        </div>
      </li>
      <li>
        <div class="title">指令 Directives</div>
        <div class="simple">
          <div v-if="false">看不见这个</div>
          <div v-if="true">看得见这个</div>
        </div>
      </li>
      <li>
        <div class="title">动态参数</div>
        <div class="desc">动态参数包含在 [] 中，当做 js 表达式来计算</div>
        <div class="simple">
          <a v-bind:[a_param]="a_value">跳转到百度</a> <br>
          <a :[a_param]="a_value">跳转到百度</a>

          <div v-on:[event1]="div_click">点击这个1</div>
          <div @[event1]="div_click">点击这个2</div>
          <div @[event2]="div_click">点击这个3</div>
        </div>
      </li>
    </ol>
  </div>
</template>

<style lang="scss" scoped>
.main {
  padding: 10px;

  h1 {
    font-size: 22px;
  }

  ol {
    li {
      & + li {
        margin-top: 25px;
      }

      .title {
        font-size: 18px;
      }

      .desc {
        font-size: 14px;
        margin-top: 10px;
      }

      .simple {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }
}
</style>